import React from 'react';
import { useSelector } from 'react-redux';
import { getToken, hasRole } from '../utils/jwtUtils';

/**
 * 权限控制包装组件
 * @param {object} props
 * @param {React.ReactNode} props.children - 被保护的子组件
 * @param {string|array} [props.roles] - 访问所需的角色
 * @param {React.ReactNode} [props.fallback] - 无权限时显示的内容
 * @returns {React.ReactNode} 受保护的组件或回退组件
 */
export const ProtectedRoute = ({ children, roles, fallback }) => {
  // 直接使用useSelector获取认证状态
  const { isAuthenticated } = useSelector((state) => state.user);
  const token = getToken();

  // 如果未登录，重定向到登录页
  if (!isAuthenticated || !token) {
    // 这里可以返回登录页面或提示信息
    return fallback || (
      <div style={{ textAlign: 'center', marginTop: '2rem' }}>
        <h2>请先登录</h2>
        <a href="/login">前往登录</a>
      </div>
    );
  }

  // 如果需要特定角色且用户没有该角色，显示无权限信息
  if (roles && !hasRole(token, roles)) {
    return fallback || (
      <div style={{ textAlign: 'center', marginTop: '2rem' }}>
        <h2>权限不足</h2>
        <p>您没有访问此页面的权限，请联系管理员</p>
      </div>
    );
  }

  // 用户已登录且有权限，显示子组件
  return children;
};